<!doctype html>
<html lang="en">
<head>

<?php include './inc/css.html'; ?>

<style type="text/css">
.video{
    width:100%;
}
.video .video-js{
    width:100%;
    /*height:2rem;*/
}
.video-info{
    padding:.1rem;
    line-height: 1.2;
}
.video-info p{
    text-indent: .2rem;
    margin:.1rem auto;
}

#my-frame{
    width:100%;
    min-height:2rem;
}

.chapter-jump{
    height:.5rem;
    line-height: .5rem;
}
</style>

</head>
<body>

<?php include './inc/pagetitle_fav.html'; ?>

<div class="wrap">

<div class="video">
    <div class="sectionheader tc">
        <div class="sectiontitle">章节视频</div>
        <div class="sectionsubtitle _text_secondary ">章节简介描述</div>
    </div>

    <video id="my-video" class="video-js vjs-big-play-centered" controls preload="auto" width="640" height="320"  poster="./../assets/img/staff1.jpg" data-setup="{}">
        <source src="./../assets/img/video.mp4" type="video/mp4">
        <source src="./../assets/img/video.webm" type="video/webm">
    </video>

<!--     <div class="sectionheader tc">
        <div class="sectiontitle">优酷视频</div>
        <div class="sectionsubtitle _text_secondary ">课程简介描述</div>
    </div>

    <iframe id="my-frame"  src='http://player.youku.com/embed/XMzE2MzY5OTQ4MA==' frameborder=0 'allowfullscreen'></iframe>


    <div class="sectionheader tc">
        <div class="sectiontitle">腾讯视频</div>
        <div class="sectionsubtitle _text_secondary ">课程简介描述</div>
    </div>

    <iframe  id="my-frame"  src="https://v.qq.com/iframe/player.html?vid=a05189oc6wj&tiny=0&auto=0" frameborder="0"  allowfullscreen></iframe> -->

</div>
<div class="video-info _text_secondary">
    <p>
       章节详细介绍，章节详细介绍，章节详细介绍， 
       章节详细介绍，章节详细介绍，章节详细介绍， 
       章节详细介绍，章节详细介绍，章节详细介绍， 
       章节详细介绍，章节详细介绍，章节详细介绍， 
    </p>
</div>
<div class="line1"></div>
<div class="chapter-jump  around">
    <a href="#" class="jump-left showmsg" data-msg="没有了"><span class="ion-arrow-left-c"></span> 上一章</a>
    <a href="./course_chapter_text_detail.php" class="jump-right">下一章 <span class="ion-arrow-right-c"></span></a>
</div>

<!-- Start 章节-->

<div class="line1"></div>
<div class="list-header _border_dark">
    <div class="h-info fl ">
        <p class="title oneline">推荐课程</p>
        <p class="subtitle _text_secondary oneline">快速提升职业技能</p>
    </div>
    <div class="h-icon fr tr">
        <span class="ion-ios-more"></span>
    </div>
</div>
<div class="line1"></div>


<ul class="list commonlist">
<?php for ($i=1; $i<4;$i++) { ?>
<li class="l-item">
        <a class="_text_parimary" href="#">
            <div class="l-item-img center fl">
               <div class="img" style="background-image: url('./../assets/img/staff<?php echo $i; ?>.jpg')" > </div>
            </div>
            <div class="l-item-body">
                <div class="title oneline">课程标题课程标题课程标题</div>
                <div class="subtitle _text_secondary oneline">课程描述课程描述课程描述课程描述课程描述课程描述</div>
                <div class="simpleinfo around tc">
                    <span>XX老师</span>
                    <span></span>
                    <span class="ion-ios-calendar-outline"> 2017-01-01</span>
                </div>
            </div>
        </a>
</li>
<div class="line1"></div>
<?php } ?>
</ul>
<!-- End 课程-->


<!--底部-->
<div class="listbottom tc op6">我是有底线的~</div>
 
</div>   

<!-- <?php include './inc/nav.html'; ?> -->

</body>

<?php include './inc/js.html'; ?>
<script type="text/javascript">
$(document).ready(function(){




            var resetVideoSize = function(myPlayer){
                var videoJsBoxWidth = $(".video-js").width();
                var ratio = 1440/900;
                var videoJsBoxHeight = videoJsBoxWidth/ratio;
                myPlayer.height(videoJsBoxHeight);
            }

            var myPlayer = videojs("my-video").ready(function(){
                this.width("100%");
                resetVideoSize(myPlayer);
            });



            $(window).on("resize", function(){
                resetVideoSize(myPlayer); 
            });

})

</script>
</html>